<template>
  <div class="time_wrap">
    <CIcon class="time_icon" name="time" width="20" height="20" />
    <span class="text">{{ toDayTime }}</span>
  </div>
</template>

<script>
import { defineComponent, ref, onMounted, nextTick } from 'vue';
export default defineComponent({
  name: 'Time',
});
</script>
<script setup>
import CIcon from '../../../components/CIcon.vue';
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';

const toDayTime = ref('');

nextTick(() => {
  setInterval(() => {
    // let now = ;
    toDayTime.value = dayjs().locale('zh-cn').format('YYYY-MM-DD HH:mm:ss');
  }, 1000);
});

onMounted(() => {
  toDayTime.value = dayjs().locale('zh-cn').format('YYYY-MM-DD HH:mm:ss');
});
</script>

<style lang="scss" scoped>
.time_wrap {
  width: 266px;
  display: flex;
  flex-direction: row;
  // justify-content: space-between;

  .time_icon {
    position: relative;
    top: 3px;
    margin-right: 5px;
  }
  .text {
    letter-spacing: 1px;
    color: white;
    font-size: 18px;
    font-family: 'fontShuHeiTi';
  }
}
</style>
